window.addEventListener('load', function () {

    const canvas = document.getElementById('canvas1');
    canvas.width = 800;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    let enemys = [];

    class InputHandler{
        constructor(){
            this.keys= []
            window.addEventListener('keydown',(e)=>{
                if((e.key==='ArrowDown'
                    ||e.key==='ArrowUp'
                    ||e.key==='ArrowLeft'
                    ||e.key==='ArrowRight')
                    &&this.keys.indexOf(e.key)===-1
                ){
                    console.log(e.key)
                    this.keys.push(e.key)
                }
            });
            window.addEventListener('keyup',(e)=>{
                if(e.key==='ArrowDown'
                    ||e.key==='ArrowUp'
                    ||e.key==='ArrowLeft'
                    ||e.key==='ArrowRight'){
                        this.keys.splice(this.keys.indexOf(e.key),1);  
                }
            })
        }
    }

    class Player{
        constructor(gameWidth,gameHeight){
            this.gameWidth = gameWidth;
            this.gameHeight = gameHeight;
            this.width = 200;
            this.height = 200;
            this.x = 0;
            this.y = this.gameHeight - this.height;
            this.speed = 0;
            this.vy =0;
            this.image = document.getElementById('playerImg');
            this.frameX = 0;
            this.frameY = 0;
            this.maxFrame = 8;
            this.fps = 20;
            this.frameTimer = 0;
            this.frameInterval = 1000/this.fps;            
            this.weight = 1;
        }
        update(input,deltatime){

            if(this.frameTimer>=this.frameInterval){
                if(this.frameX>=this.maxFrame ){
                    this.frameX = 0;
                }else{
                    this.frameX++;
                }             
                this.frameTimer=0
            }else{
                this.frameTimer+= deltatime;
            }

            if(input.keys.indexOf('ArrowRight')>-1){
                this.speed = 5;
            }else if( input.keys.indexOf('ArrowLeft')>-1){
                this.speed = -5;
            }else if(input.keys.indexOf('ArrowUp')>-1&&this.onGround()){
                this.vy -= 32
            }else {
                this.speed = 0;
            }

            this.x += this.speed;
            if(this.x< 0)this.x = 0;
            if(this.x > this.gameWidth - this.width){
                this.x = this.gameWidth - this.width;
            }

            this.y += this.vy;
            if(!this.onGround()){
                this.vy += this.weight;
                this.maxFrame = 5;
                this.frameY=1;
            }else{
                this.vy = 0;
                this.maxFrame = 8;
                this.frameY=0;
            }

            if(this.y>this.gameHeight - this.height)this.y= this.gameHeight- this.height;
  
        }
        onGround(){
            return this.y >= this.gameHeight - this.height
        }
        draw(ctx){
            // ctx.fillStyle="white";
            // ctx.fillRect(this.x,this.y,this.width,this.height);
            ctx.drawImage(this.image,this.frameX*this.width,this.frameY*this.height,this.width,this.height,this.x,this.y,this.width,this.height)
        }
    }

    class Background{
        constructor(gameWidth,gameHeight){
            this.gameWidth = gameWidth;
            this.gameHeight = gameHeight;
            this.x = 0;
            this.y = 0;
            this.width = 2400;
            this.height = 720;
            this.image = document.getElementById("backgroundImg");
            this.speed = 5;
        }
        update(){
            this.x-=this.speed;
            if(this.x<-this.width){
                this.x=0;
            }
        }
        draw(ctx){
            ctx.drawImage(this.image,this.x,this.y,this.width,this.height);
            ctx.drawImage(this.image,this.x+this.width-this.speed,this.y,this.width,this.height)
        }
    }

    class Enemy{
        constructor(gameWidth,gameHeight){
            this.gameWidth = gameWidth;
            this.gameHeight = gameHeight;
            this.width = 160;
            this.height = 119;
            this.x = this.gameWidth;
            this.y = this.gameHeight - this.height;            
            this.image = document.getElementById("enemyImg");
            this.frameX = 0;
            this.maxFrame = 5;
            this.fps = 20;
            this.frameTimer = 0;
            this.frameInterval = 1000/this.fps;
            this.markerForDeletion = false;
            this.speed = 5;
        }
        update(deltatime){
            if(this.frameTimer>=this.frameInterval){
                if(this.frameX>=5){
                    this.frameX = 0;
                }else{
                    this.frameX++;
                }
                this.frameTimer=0
            }else{
                this.frameTimer+= deltatime;
            }

            this.x -= this.speed;

            if(this.x<-this.width){
                this.markerForDeletion = true;
            }
        }
        draw(ctx){
            ctx.drawImage(this.image,this.frameX*this.width,0,this.width,this.height,this.x,this.y,this.width,this.height);
        }
    }


    function handleEnemies(deltaTime){
        if(enemysTimer>enemysInterval+randomEnemysInterval){
            enemys.push(new Enemy(canvas.width,canvas.height));
            randomEnemysInterval=Math.random()*1000+500
            enemysTimer=0
        }else{
            enemysTimer+=deltaTime;
        }
 
        enemys.forEach(object=>{
            object.draw(ctx);
            object.update(deltaTime)
        });
        enemys = enemys.filter(object=>!object.markerForDeletion);
        // console.log(enemys)
    }

    function displayStatusText(){

    }

    const input = new InputHandler();
    const player = new Player(canvas.width,canvas.height);
    const background = new Background(canvas.width,canvas.height);


    let lastTime = 0;
    let enemysTimer = 0;
    let enemysInterval = 1000;
    let randomEnemysInterval = Math.random()*1000 + 500;

    function animate(timestamp){
        ctx.clearRect(0,0,canvas.width,canvas.height);

        const deltaTime = timestamp - lastTime;
        lastTime = timestamp;
        // background.update()
        background.draw(ctx)
        player.update(input,deltaTime);
        player.draw(ctx);

        handleEnemies(deltaTime);
        requestAnimationFrame(animate)
    }
    animate(0);






})

